<!--
 * @FilePath: /my-map-demo/src/views/spatial-analysis/MapView.vue
 * @Author: 张文鑫
 * @Date: 2024-12-26 17:15:40
 * @Description: 
-->
<template>
  <div>
    <el-select v-model="selectedChart" placeholder="选择图类型">
      <el-option v-for="type in chartTypes" :key="type.value" :label="type.label" :value="type.value" />
    </el-select>
    <component :is="currentChart" style="margin-top: 10px" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 引入图类型组件
import HeatMap from "./components/HeatMap.vue";
import PointMap from "./components/PointMap.vue";
import AreaMap from "./components/AreaMap.vue";
import GridMap from "./components/GridMap.vue";

const chartTypes = [
  { label: "热力图", value: "HeatMap", component: HeatMap },
  { label: "点图", value: "PointMap", component: PointMap },
  { label: "面图", value: "AreaMap", component: AreaMap },
  { label: "栅格图", value: "GridMap", component: GridMap },
];

const selectedChart = ref("HeatMap");

const currentChart = computed(() => chartTypes.find((chart) => chart.value === selectedChart.value)?.component);
</script>
